.bridge-transaction-details {
  &__content {
    overflow-y: hidden;
  }

  &__icon-loading {
    animation: loading-dot 1.2s linear infinite;
  }

  &__segment {
    height: 4px;
    width: 0;
    transition: width 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);

    &--pending {
      width: 50%;
    }

    &--complete {
      width: 100%;
    }
  }

  &__step-grid {
    display: grid;
    grid-template-columns: 1rem 6fr;
    column-gap: 1rem;
    justify-items: center;
    align-items: center;

    &--desc {
      justify-self: start;
    }
  }

  @keyframes loading-dot {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    45% {
      transform: scale(0.7);
      opacity: 0.7;
    }

    80% {
      transform: scale(1);
      opacity: 1;
    }
  }
}


